<!--
 * @Author: C.
 * @Date: 2021-06-18 10:05:19
 * @LastEditTime: 2021-06-18 10:23:39
 * @Description: file content
-->
<template>
  <div>
    <el-button size="mini"
               type="primary"
               @click="validate">
      校验表单
    </el-button>

    <JvTableForm :rules="rules"
                 :model="ruleForm"
                 ref="ruleForm">
      <TR>
        <TD>
          <el-form-item label="姓名"
                        prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
        </TD>
        <TD>
          <el-form-item label="ID"
                        prop="ID">
            <el-input v-model="ruleForm.ID"></el-input>
          </el-form-item>
        </TD>
        <TD>
          <el-form-item label="电话号码"
                        prop="phone">
            <el-input v-model="ruleForm.phone"></el-input>
          </el-form-item>
        </TD>
      </TR>
      <TR>
        <TD>
          <el-form-item label="性别"
                        prop="sex">
            <el-input v-model="ruleForm.sex"></el-input>
          </el-form-item>
        </TD>
        <TD>
          <el-form-item label="年龄"
                        prop="age">
            <el-input v-model="ruleForm.age"></el-input>
          </el-form-item>
        </TD>
        <TD>
          <el-form-item label="爱好"
                        prop="favorite">
            <el-input v-model="ruleForm.favorite"></el-input>
          </el-form-item>
        </TD>
      </TR>
      <TR>
        <TD colspan="6">
          <el-form-item label="备注"
                        prop="remark">
            <el-input v-model="ruleForm.remark"
                      type="textarea"></el-input>
          </el-form-item>
        </TD>
      </TR>

    </JvTableForm>
  </div>
</template>

<script>
import JvTableForm from '../../../src/Jv_cpn/JvTableForm'
export default {
  components: {
    JvTableForm,
  },
  data () {
    return {
      show: false,
      ruleForm: {
        name: '',
        ID: '',
        phone: '',
        age: '',
        sex: '',
        favorite: '',
        remark: ''
      },
      rules: {
        name: [
          { required: true, message: '请填写名字', trigger: 'blur' }
        ],
        age: [
          { required: true, message: '请填写年龄', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    validate () {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.$message({
            message: '验证成功',
            type: 'success'
          });
        } else {
          this.$message({
            message: '请完成必填项',
            type: 'error'
          });
        }
      })
    }
  },
}
</script>

<style lang="scss">
</style>